<template>
  <div class="container">
    <!-- 导航 -->
    <global-header :user="currentUser" />
    <!-- 列表 -->
    <column-list :list="list" />
  </div>
</template>

<script lang="ts">
// 引入 bootstrap
import 'bootstrap/dist/css/bootstrap.min.css'
// 组件
import ColumnList, { ColumnProps } from './components/ColumnList.vue'
import GlobalHeader, { UserProps } from './components/GlobalHeader.vue'
// Vue
import { defineComponent } from 'vue'

const testData: ColumnProps[] = [
  {
    id: 1,
    title: 'test1的专栏',
    description: '这是test1的专栏',
    avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.bq233.com%2Fkanqq%2Fpic%2Fupload%2F2018%2F0807%2F1533622762937587.jpg&refer=http%3A%2F%2Fimg.bq233.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639969817&t=2b3dcc1454bba58cefef173c7ee94a0e'
  },
  {
    id: 2,
    title: 'test2的专栏',
    description: '这是test2的专栏',
    avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.bq233.com%2Fkanqq%2Fpic%2Fupload%2F2018%2F0807%2F1533622762937587.jpg&refer=http%3A%2F%2Fimg.bq233.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639969817&t=2b3dcc1454bba58cefef173c7ee94a0e'
  },
  {
    id: 3,
    title: 'test3的专栏',
    description: '这是test3的专栏',
    avatar: ''
  },
  {
    id: 3,
    title: 'test3的专栏',
    description: '这是test3的专栏',
    avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.bq233.com%2Fkanqq%2Fpic%2Fupload%2F2018%2F0807%2F1533622762937587.jpg&refer=http%3A%2F%2Fimg.bq233.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639969817&t=2b3dcc1454bba58cefef173c7ee94a0e'
  }
]
const currentUser: UserProps = {
  isLogin: true,
  name: 'Alomy'
}
export default defineComponent({
  components: {
    ColumnList, GlobalHeader
  },
  setup () {
    return {
      list: testData,
      currentUser
    }
  }
})
</script>

<style lang="less">
img {
  width: 200px;
}
</style>
